<template>
  <div class="whole-box flex_between">
    <!-- <EchartsGauge style="width: 400px;height: 400px;"></EchartsGauge> -->
    <div class="left">
      <ItemBox title="社区实时概况" style="height: 49%;">
        <span class="date" slot="select">{{date}}</span>
        <SubContentBox slot="content" title="社区实时概况" >
        <div slot="content" class="flex">
          <div class="chartContainer" style="width: 90%; height: 160px">
            <HBar />
          </div>
        </div>
        </SubContentBox>
      </ItemBox>
      <ItemBox title="商业实时概况" style="height: 49%;">
        <span class="date" slot="select">{{date}}</span>
        <div slot="content" class="flex" style="flex:1">
          <div class="chartContainer" style="width: 100%; height: 160px">
            <SBar />
          </div>
        </div>
      </ItemBox>
    </div>
    <div class="right">
      <ItemBox title="交通实时概况" style="height: 49%;">
        <span class="date" slot="select">{{date}}</span>
        <div slot="content" class="flex">
          <TradeDetail />
        </div>
      </ItemBox>
      <ItemBox title="文旅实时概况" style="height: 49%;">
        <span class="date" slot="select">{{date}}</span>
      </ItemBox>
    </div>
  </div>
</template>

<script>
import HBar from '@/components/echarts/bar/horizontalBar'
import SBar from '@/components/echarts/bar/stackBar'
import TradeDetail from '@/components/TradeDetail'

  export default {
    name: 'Whole',
    components: {
      HBar,
      SBar,
      TradeDetail
    },
    data() {
      return {
        date: null
      };
    },
    created() {
      this.getDate()
    },
    mounted() { },
    methods: {
      //获取当前日期
      getDate() {
        this.date = this.$moment().format('YYYY-MM-DD')
      },

    },
  };
</script>

<style lang="scss" scoped>
  .whole-box {
    width: 100%;
    height: 100%;

    .left,
    .right {
      pointer-events:fill;
      width: 24.5%;
      height: 100%;
      span{
        font-size: 22px;
        margin-right: 20px;
        color:rgba(255,255,255,0.8)
      }
      .pie-echarts{
        width: 25%;
        height: 170px;
      }
      /* background-color: red; */
    }
  }
</style>